<template>
  <!-- 导航栏 -->
  <el-row style="margin: 15px 20px;">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>主数据</el-breadcrumb-item>
      <el-breadcrumb-item>物料管理</el-breadcrumb-item>
    </el-breadcrumb>
  </el-row>
  <!-- 搜索栏 -->
  <el-row style="margin: 15px 20px;">
    <el-form :inline="true" :model="searchObject">
      <el-form-item label="名称">
        <el-input v-model="searchObject.materialName" placeholder="物料名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
  </el-row>
  <!-- 工具栏 -->
  <el-row style="margin: 15px 20px;">
    <el-button-group>
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="primary" @click="edit">修改</el-button>
      <el-button type="primary" @click="del">删除</el-button>
      <el-button type="primary" @click="exportExcel">导出</el-button>
      <el-button type="primary" @click="importExcel">导入</el-button>
      <el-button type="primary" @click="refresh">刷新</el-button>
    </el-button-group>
  </el-row>
  <!-- 列表 -->
  <el-row style="margin: 15px 20px;">
    <el-table :data="materialList">
      <el-table-column label="物料编号">
        <template #default="scope">
          {{ scope.row.materialId }}
        </template>
      </el-table-column>
      <el-table-column label="物料名称" prop="materialName"></el-table-column>
      <el-table-column label="规格型号" prop="specification"></el-table-column>
      <el-table-column label="图片">
        <template #default="scope">
          <el-image v-if="scope.row.imageUrl" :src="scope.row.imageUrl" style="width: 100px; height: 100px;" />
        </template>
      </el-table-column>
    </el-table>
  </el-row>

  <!-- 新增弹窗 -->
  <el-dialog v-model="dialogVisible" title="新增物料" width="80%">
    <el-form :model="materialForm" label-width="160px">
      <el-row :gutter="20">
        <!-- 左侧列 -->
        <el-col :span="12">
          <el-form-item label="物料编号">
            <el-row>
              <el-col :span="18"><el-input v-model="materialForm.materialId" /></el-col>
              <el-col :span="6">
                <el-switch @change="getNewMaterialCode"  v-model="generateNewMaterialCode"
                           active-text="生成"
                           inactive-text="生成"
                           inline-prompt
                />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="物料名称">
            <el-input v-model="materialForm.materialName" />
          </el-form-item>
          <el-form-item label="规格型号">
            <el-input v-model="materialForm.specification" />
          </el-form-item>
          <el-form-item label="单位ID">
            <el-input v-model.number="materialForm.unitId" />
          </el-form-item>
          <el-form-item label="分类ID">
            <el-input v-model.number="materialForm.categoryId" />
          </el-form-item>
          <el-form-item label="是否启用">
            <el-select v-model="materialForm.enabledFlag" placeholder="请选择" style="width: 100%">
              <el-option label="启用" :value="1" />
              <el-option label="禁用" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="安全库存">
            <el-input v-model.number="materialForm.safetyStock" />
          </el-form-item>
        </el-col>
        <!-- 右侧列 -->
        <el-col :span="12">
          <el-form-item label="最小库存量">
            <el-input v-model.number="materialForm.minStock" />
          </el-form-item>
          <el-form-item label="最大库存量">
            <el-input v-model.number="materialForm.maxStock" />
          </el-form-item>
          <el-form-item label="是否高价值易被盗">
            <el-select v-model="materialForm.highValueFlag" placeholder="请选择" style="width: 100%">
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="图片">
            <el-upload
                class="avatar-uploader"
                :action="uploadImageUrl"
                :show-file-list="false"
                :on-success="handleUploadSuccess"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="materialForm.remark" type="textarea" :rows="3" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveMaterial">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import materialHttp from '../../api/material.js'

const  uploadImageUrl = "http://localhost:11011/master/uploadImage";
const imageUrl = ref('');
const materialList = ref([]);
const searchObject = ref({
  materialName: '',
});
const newMaterialCode = ref('');
const generateNewMaterialCode = ref(false);

const dialogVisible = ref(false); // 控制弹窗显示
const materialForm = ref({
  materialId: '',
  materialName: '',
  specification: '',
  unitId: null,
  categoryId: null,
  enabledFlag: 1,
  safetyStock: null,
  minStock: null,
  maxStock: null,
  highValueFlag: 0,
  remark: '',
});
// 上传图片成功的处理事件
function handleUploadSuccess(response, file, fileList){
  console.log(response)
  if(response.code == 200){
    imageUrl.value = response.data;
  }else if(response.code == 500){
    ElMessage.error("上传图片失败，请重试！")
  }
}

// 新增按钮点击事件
function add() {
  // 重置表单
  materialForm.value = {
    materialId: '',
    materialName: '',
    specification: '',
    unitId: null,
    categoryId: null,
    enabledFlag: 1,
    safetyStock: null,
    minStock: null,
    maxStock: null,
    highValueFlag: 0,
    remark: '',
  };
  dialogVisible.value = true;
}
// 获取最新的编号
function getNewMaterialCode(checked) {
  if(checked){
    materialHttp.getNewMaterialCode().then(res => {
      if (res.code == 200) {
        materialForm.value.materialId = res.data;
      }
    })
  }else{
    materialForm.value.materialId = '';
  }
}
// 保存物料（后续可对接接口）
function saveMaterial() {
  materialForm.value.imageUrl = imageUrl.value;
  console.log('保存的物料数据:', materialForm.value);
  dialogVisible.value = false;
  materialHttp.save(materialForm.value).then(res=>{
    if(res.code == 200){
      ElMessage.success("保存成功！")
      loadMaterialList();
    }else{
      ElMessage.error("保存失败！")
    }
  })
}

// 加载数据列表的方法
function loadMaterialList(){
  materialHttp.listByPage(1,10,searchObject.value.materialName).then(res=>{
    console.log(res);
    materialList.value = res.data.records;
  })
}

onMounted(()=>{
  loadMaterialList();
})
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
 .avatar-uploader .el-upload {
   border: 1px dashed var(--el-border-color);
   border-radius: 6px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   transition: var(--el-transition-duration-fast);
 }

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>